<template>
	<view class="content">
		<view 
			class="head-bg h-264" 
			:style="{
				'background': `url(${getImg('index-bg')}) no-repeat`,
			}"
		>
			<headNav 
				title="爱美丽美容" 
				bgColor="transparent" 
				leftSlot
			></headNav>
			<view 
				class="tabs-box"
			>
				 <u-tabs 
					:list="tabsList"
					lineColor="#FF7171"
					:current="tabsCurrent"
					 lineWidth="60rpx"
					:activeStyle="{
						color: '#111111',
						fontWeight: 'bold',
						fontSize: '34rpx'
					}"
					@change="tabsChange"
					:scrollable="false"
				></u-tabs>
			</view>
		</view>
		<!-- <home v-show="!tabsCurrent"></home>
		<all-home 
			v-show="tabsCurrent"
			ref="allHomeRef"
		></all-home> -->
		<!-- <component :is="acountComponents"></component> -->
	</view>
</template>

<script>
	import home from "./components/home.vue"
	import allHome from "./components/allHome.vue"
	export default {
		components: {
			home,
			allHome
		},
		data() {
			return {
				acountComponents: 'home',
				tabsList: [
					{
						name: '首页',
					}, 
					{
						name: '全部',
					}, 
				],
				tabsCurrent: 1,
			}
		},
		onLoad() {

		},
		methods: {
			goRouter() {
				uni.navigateTo({
					url: "/pages/login/login"
				})
			},
			tabsChange(eve) {
				this.tabsCurrent = eve.index;
				if(!this.tabsCurrent) {
					this.acountComponents = 'home'
				}else {
					this.acountComponents = 'allHome'
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.head-bg{
	background-size: 100% 100% !important;
}
</style>
<style>
	page {
		/* background: #FFFFFF; */
	}
</style>
